<template>
    <div>
        <h4>基础篇-计算属性</h4>
        <div><b>普通数据：</b> {{ text }} </div>
        <div><b>函数形式：</b> {{ countComp }} </div>
        <div><b>对象形式：</b> {{ countGetComp }} </div>

        <button @click="text++">修改text</button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

/**
 * computed()
 * 【说明】：用于创建一个计算属性、
 *          1、接收一个回调函数，返回一个只读的响应式ref对象、
 *          2、接收一个带有get\set函数的对象、可以数据进行读写操作
 */

let text = ref(10)


// 函数形式
const countComp = computed(() => {
    return text.value * 2 // 返回一个只读的ref对象
})
console.log("函数形式:", countComp.value);


// 对象形式
const countGetComp = computed({
    get() {
        return text.value
    },
    set(val) {
        text.value = text.value + val
    }
})
countGetComp.value = 100 // 向set传值
console.log("对象形式:", countGetComp.value); // 读取

</script>

<style lang="scss" scoped></style>